@charset "utf-8";

// form fun.less
.label(@color: #515a6e) {
    label {
        display: inline-block;
        margin-bottom: 0.2rem;
        color: @color;
        user-select: none;
        text-transform: capitalize;
    }
}
.formInput(@background-color, @border-color, @background-hover, @border-hover) {
    .form-input {
        display: block;
        width: 100%;
        height: calc(2.25rem + 2px);
        line-height: 1.5;
        padding: 0.375rem 0.75rem;
        background-color: @background-color;
        border: 1px solid @border-color;
        font-size: 14px;
        color: #fff;
        transition: border 0.3s ease;

        &:hover {
            border-color: @border-hover;
        }
        &:focus {
            background-color: @background-hover;
        }

        &:disabled, &[readonly] {
            background-color: rgba(239, 239, 239, 0.3);
            border-color: rgba(118, 118, 118, 0.3);
            cursor: not-allowed;
        }

        option {
            background-color: rgba(0, 0, 0, 0.5);
            color: #eee;
            font-size: 18px;
        }

        &-plaintext {
            display: block;
            width: 100%;
            padding: 0.375rem 0;
            font-size: 1rem;
            line-height: 1.6;
            user-select: none;
        }
    }
}
.formInputError() {
    &.has-error {
        .form-input {
            border-color: #f45d90;
        }
    }
}
.textarea() {
    textarea.form-input {
        height: 86px;
        resize:vertical;
    }
}
// 单选,复选框
.radioCheckbox() {
    margin-right: 15px;
    padding-top: calc(.375rem + 2px);
    cursor: pointer;
    user-select:none;
}
.inputNone(@type) {
    input[type="@{type}"] {
        display: none;
    }
}
.newStyle(@class, @radius) {
    .@{class} {
        display: inline-block;
        width: 22px;
        height: 22px;
        border: 2px solid #c2c2c2;
        border-radius: @radius;
        margin-right: 5px;
        vertical-align: bottom;
    }
}
.inputChecked(@class, @bg-color, @radius) {
    input:checked {
        &+.@{class} {
            border-color: @bg-color;

            &:after {
                content: "";
                display: block;
                width: 12px;
                height: 12px;
                background-color: @bg-color;
                margin-top: 3px;
                margin-left: 3px;
                border-radius: @radius;
            }
            &~span {}
        }
    }
}
.formRadio() {
    .form-radio {
        .radioCheckbox();

        .inputNone(@type: radio);

        .newStyle(@class: radio, @radius: 50%);

        .inputChecked(@class: radio, @bg-color: rgba(255, 255, 255, 1), @radius: 50%);
    }
}
.formCheckbox() {
    .form-checkbox {
        .radioCheckbox();

        .inputNone(@type: checkbox);

        .newStyle(@class: checkbox, 3px);

        .inputChecked(@class: checkbox, @bg-color: #1aa2d4, @radius: 1px);
    }
}


.form-layout {
    * {
        box-sizing: border-box;
    }

    .form-group {
        margin-bottom: 1rem;

        .formInputError();
    }

    .form-row {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -5px;

        &>.col,
        &>[class*='col-'] {
            padding: 0 5px;
        }
    }

    .label(#e5e9ec);
    .formInput(
        @background-color: rgb(255 255 255 / 14%),
        @border-color: rgb(255 255 255 / 24%),
        @background-hover: rgb(255 255 255 / 2%),
        @border-hover: rgb(255 255 255 / 55%)
    );

    .textarea();

    .formRadio();
    .formCheckbox();
}

::placeholder {
    color: rgba(255, 255, 255, 0.3);
}
